<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="预约时间">
				<view slot="center" class="navTitle">
					预约时间 
				</view>
			</u-navbar>
		</view>
		
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="expertList pd30" v-if="info">
					<view class="item">
						<view class="img">
							<image :src="info.image" mode="aspectFill"></image>
						</view>
						<view class="in">
							<view class="tag" :class="info.type==0?'':'s2'">
								<text>{{info.tag}}</text>
								<view class="sd">
									<image src="@/static/images/roundl.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="im">
								<view class="il">
									<view class="it">
										<text class="n">{{info.name}}</text>
										<text>{{info.position}}</text>
									</view>
									<view class="ip">
										{{info.desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pd30">
					<view class="icalendar">
						<view class="filterBlock">
							<view class="block">
								<view class="tit">
									选择预约时间
								</view>
								<view class="br">
									<view class="select">
										<uni-data-select
										  v-model="defaultYear"
										  :localdata="yearOptions"
										  :clear="false"
										  placeholder="年"
										  @change="updateCalendar"
										></uni-data-select>
									</view>
									<view class="select">
										<uni-data-select
										  v-model="defaultMonth"
										  :localdata="monthOptions"
										  :clear="false"
										  placeholder="月"
										  @change="updateCalendar"
										></uni-data-select>
									</view>
								</view>
								
							</view>
							<view class="block">
								<view class="staticCalendar">
									<uni-calendar :selected="dateList" :showHeader="false" :date="(defaultYear+'-'+defaultMonth+'-'+defaultDate)" :showMonth="false" @change="selectedDate" />
								</view>
							</view>
						</view>
					</view>
					<view class="timeSelecter" v-if="dates.length>0">
						<view class="tit">
							<view class="ico">
								<image src="@/static/images/icon-calendar.svg" mode="aspectFit"></image>
							</view>
							<view class="t">
								<text>{{form.date|dateFormate}}</text>
								<text>{{form.date|dateFormate('week')}}</text>
							</view>
						</view>
						<view class="timeList">
							<view class="i" v-for="i in dates" :class="''+timeStatus(i)" @tap="selectTime(i)">
								<view class="tm">
									{{i.time}}
								</view>
								<view class="stu">
									<text class="s1">不可预约</text>
									<text class="s2">可预约</text>
									<text class="s3">约满</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tabContentBox" v-if="info.contents">
						<view class="tbs">
							<view class="tb" v-for="(i,index) in info.contents" @tap="changeTab(index)" :class="tabIndex==index?'active':''">{{i.title}}</view>
						</view>
						<view class="con">
							<view class="p" v-html="info.contents[tabIndex].content"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				tabIndex:0,
				seletedDate:'',
				seletedTime:'',
				defaultYear:new Date().getFullYear(),
				defaultMonth:new Date().getMonth(),
				defaultDate:new Date().getDate(),
				dateList:[],
				dates:[],
				info:{},
				form:{
					expertId:101,
					date:'',
					time:'',
				},
				selectedDates:[]
			}
		},
		methods: { 
			changeTab(index){
				this.tabIndex=index;
			},
			updateCalendar(){//年或者月改改，更新日历
				var that=this;
				var dayLength=new Date(that.defaultYear, that.defaultMonth, 0).getDate();
				if(that.defaultDate>dayLength){
					that.defaultDate=1
				};
				that.getDates();
			},
			selectedDate(e){//切换日期
				this.dates=[];
				if(e.extraInfo&&!e.extraInfo.disable){return};
				this.form.date=e.fulldate;
				this.defaultDate=e.date||'';
				this.dates=e.extraInfo.dates||[];
			},
			timeStatus(i){
				var that=this;
				var res='';
				if(i.disable){
					res='disabled'
				}else if(i.appointPerson){
					res='full'
				};
				if(that.seletedTime==(that.form.date+i.time)){
					res+=' '+'selected'
				};
				return res;
			},
			selectTime(i){
				var that=this;
				if(i.appointPerson||i.disable){return};
				that.seletedTime=that.form.date+i.time;
				that.form.time=i.time;
				that.stepNext();
			},
			stepNext(){//设置缓存并跳转到确认页面
				var that=this;
				uni.setStorage({
					key:'appointFormData',
					data:JSON.stringify(that.form),
					success() {
						uni.navigateTo({
							url:'/subpage/appointment/check'
						})
					}
				})
			},
			getDates(){
				var that=this;
				console.log(that.defaultYear,that.defaultMonth);
				var res=[
						{
							date:'2024-10-05',
							info:'不可约',
							disable:false,
							dates:[]
						},
						{
							date:'2024-10-06',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-07',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-08',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-09',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:false}
							]
						},
						{
							date:'2024-10-10',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-11',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:false},
								{time:'13:00-14:00',appointPerson:null,disable:true},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-12',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-13',
							info:'不可约',
							disable:false,
						}
					];
					that.dateList=res;
			},
			getInfo(){
				var that=this;
				var res={
					id:101,
					name:"李浩楠",
					type:0,
					position:'心理专职教师',
					image:'../../static/upload/exp1.png',
					desc:'学校专职心理辅导老师，帮助学生解决问题',
					tag:'校内心理辅导专职教师',
					location:'综合楼三楼301室(心理咨询室)',
					contents:[
						{
							title:'教师简介',
							content:`行为问题不仅影响儿童的生长发育、心理健康和社会化过程，还会导致成人期发生社会适应不良、违法犯罪和精神疾病。这些问题产生的基础在儿童期，因此早期筛查及干预特别重要`
						},
						{
							title:'其他标签',
							content:`其他标签内容`
						},
						{
							title:'其他标签',
							content:`其他标签内容`
						}
					]
				};
				that.info=res;
			}
		},
		computed:{
			
		},
		mounted(){
			//清除表单缓存
			uni.removeStorage({
				key:'appointFormData'
			});
			this.getInfo();
			this.getDates();
		}
	}
</script>

<style lang="scss" scoped>
	.expertList{
		margin-bottom: 10rpx;
	}
	.filterBlock{
		.block{
			justify-content: space-between;
			.tit{
				margin-bottom: 0;
			}
			.br{
				display: flex;
				align-items: center;
				flex: 0 0 auto;
				justify-content: flex-end;
			}
		}
		.select{
			width: 180rpx;
			text-align: center;
			/deep/.uni-select__selector-item{
				justify-content: center !important;
			}
		}
	}
</style>
